JQuery provides methods to control DOM in well-organized way. You don’t require write huge code to change the value of any element's attribute or to quotation HTML code from a paragraph or division (div).it’s  provides methods such as .attr(), .html(), and .val() which act as receiver, retrieving information from DOM elements for later use.

.attr():

This method sets or returns attributes and values of the selected elements.

Script:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("table").attr("width","200");

    $("td").attr("align","center");

  });

});

</script>

HTML Code:

<table width="100px" border="1px solid">

<tr>

<td>Mindstick India</td>

</tr>

<tr>

<td>Mindstick U.S.A</td>

</tr>

</table>

<br>

<button>Click to Increase the table width</button>

Output:

Above output when code load first time on the browser the table width is 100 pixel but after pressing Click to increase the table width button the  table width increase in 200pixel and set text alignment is center.. 

.html():

This method sets or returns the content (innerHTML) of the selected elements.

Script:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("p").html("Welcome to <b>mindstick!</b> <i>India</i>");

    $("div").html("Welcome to <b>mindstick!</b> <i>U.S.A</i>");

    $("Button").html("Clicked!");  });

});

</script>

HTML Code:

<button>Click Me!</button>

<p>Mindstick</p>

<div>Mindstick</div>

Output:

Above output when after clicking on the Click Me! Button the second image will display in the screen.

.val():

This method returns or sets the value attribute of the selected elements.

Script:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    var text = $(this).text();

    $("input").val(text);

  });

});

</script>

 HTML Code:

<p>Name: <input type="text" name="Textbox"></p>

<button>Mindstick</button>

<button>India</button>

<button>U.S.A</button>

Output:

Above output will come when I will click on the Mindstick button the textbox will set the value is Mindstick and when press India or U.S.A the text set vice versa.